<template>
  <el-container id="navBar">
    <el-header>
      <div id="logo" @click="logoClick">
        <i class="iconfont icon-book"></i>
        <span id="font"> Reader site</span>
      </div>
      <el-input
        class="innerInput"
        prefix-icon="el-icon-search"
        @click="inputClick"
      >
      </el-input>
      
      <read-record-nav-bar />
      <bookshelf />
      
      <login :dialogState="loginDialogState"></login>
      <search></search>
    </el-header>
    <el-divider></el-divider>
  </el-container>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import Login from "@c/navBar/Login.vue";
import Search from "@c/Search.vue"
import Bookshelf from "@c/navBar/Bookshelf.vue"
import ReadRecordNavBar from "@c/navBar/ReadRecordNavBar.vue"

export default defineComponent({
  name:"navBar",
  props: {
    loginDialogState: {
      type: Object,
      required: false
    }
  },
  components: {
    Login,
    Search,
    Bookshelf,
    ReadRecordNavBar,
  },
  setup() {
    const router = useRouter()
    
    const logoClick = () => {
      router.push("/")
    }
    
    const inputClick = () => {
      // 删除 display:none, 显示搜索栏
      document.querySelector('div.search').removeAttribute('style');
      // 焦点放到新搜索栏
      document.querySelector('div.searchInput>div>input').focus()
      // 给 body 添加 一个 class，为了隐藏 body 的滚动条
      document.getElementsByTagName("body")[0].classList.add("body_search_show")
    }
    
    return {
      logoClick,
      inputClick,
    }
  }
})
</script>

<style scoped>
@import "@/static/css/iconfont";

/* 引入(版权)字体-方正粗黑宋简体 */
@font-face {
  font-family: FZCHSJW;
  src: url('@/static/font/FZCHSJW.TTF');
}
  
   /* 书本 logo 样式 */
   /* $icon_size: 85px; */
.icon-book {
  font-size: 33px;
  color: #2fa0dc;
  position: absolute;
  left: 20px;
  top: 10px;
}
      
  /*  字体样式 */
#font {
  font-family: "FZCHSJW";
   /* font-size: 65pt; */
  font-size: 16pt;
  color: black;
  position: absolute;
  left: 60px;
  top: 14px;
}

#navBar {
  position: relative;
}

#logo {
  cursor: pointer;
}
.el-input {
  position: absolute;
  width: 300px;
  left: 200px;
  top: 10px;
}
.el-divider {
  margin: 0;
}
[v-cloak] {
  display: none;
}
</style>
